<!doctype html>
<!--声明文档类型：html-->
<html lang="en">

<head>
    <!--头部-->
    <meta charset="UTF-8">
    <!--字符编码:utf-8国际编码-->
    <meta name="Keywords" content="关键词1,关键词2">
    <!--关键词-->
    <meta name="Description" content="描述">
    <!--描述-->
    <title>流星雨</title>
    <!--网页标题-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #canvas {
            background: #000;
            display: block;
        }
    </style>
</head>

<body>
    <!--身体-->
    <canvas id="canvas">您的浏览器不支持cnavas绘图，请您更换浏览器!!</canvas>
    <script>
        var can = document.getElementById("canvas");
        var ctx = can.getContext("2d"); //设置绘图环境
        var w = can.width = window.innerWidth; //把窗口的宽度赋值给画布
        var h = can.height = window.innerHeight; //把窗口的高度赋值给画布
        var count = 30; //雨滴的个数
        var drops = []; //定义一个空数组来保存雨滴个数
        //浏览器窗口改变的时候重新获取宽度
        window.onresize = function() {
            w = can.width = window.innerWidth;
            h = can.height = window.innerHeight;
        }

        function Drop() {} //定义雨滴对象
        //添加原型对象方法
        Drop.prototype = {
                init: function() { //初始化
                    this.x = random(0, w);
                    this.y = 0;
                    this.r = 1; //初始半径
                    this.vy = random(4, 5); //竖直方向的加速度  //从4~5之间的随机数
                    this.vr = 1; //半径的加速度
                    this.a = 1; //初始透明度
                    this.va = 0.96; //透明度的变化系数
                    this.l = random(h * 0.8, h * 0.9); //雨滴下落的高度
                },
                draw: function() { //绘制
                    if (this.y > this.l) {
                        ctx.beginPath(); //一个画布中开始子路径的一个新的集合。丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
                        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); //创建一个圆形  this.x圆的中心的 x 坐标。  this.y圆的中心的 y 坐标。   this.r圆的半径。  0 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。  2*Math.PI结束角，以弧度计。 false可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
                        ctx.strokeStyle = "rgba(0,255,255," + this.a + ")"; //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
                        ctx.stroke(); //绘制出来路径
                    } else {
                        console.log(this.a)
                        ctx.fillStyle = color(this.a); //透明度
                        // console.log(ctx.fillStyle);
                        ctx.fillRect(this.x, this.y, 2, 10); //绘制"已填充"的矩形。默认的填充颜色是黑色。
                    }
                    this.update();
                },
                //更新坐标
                update: function() {
                    if (this.y < this.l) {
                        this.y += this.vy;
                    } else {
                        if (this.a > 0.03) {
                            this.r += this.vr;
                            if (this.r > 50) {
                                this.a *= this.va;
                            }
                        } else {
                            this.init();
                        }
                    }
                }
            }
            //不断的更新雨滴位置
        function move() {
            ctx.fillStyle = "rgba(0,0,0,.1)";
            ctx.fillRect(0, 0, w, h); //这个在先绘制
            for (var i = 0; i < drops.length; i++) {
                drops[i].draw();
            }
            //调用经动画
            requestAnimationFrame(move);
        }
        //创建一个雨滴实例对象
        //var drop = new Drop();
        //drop.init();
        //drop.draw();
        //延迟产生每个雨滴
        function setup() {
            for (var i = 0; i < count; i++) {
                (function(j) {
                    setTimeout(function() {
                        var drop = new Drop();
                        drop.init();
                        drops.push(drop);
                    }, j * 200);
                }(i))
            }
        }
        setup();
        move();
        //封装一个产生随机数的方法
        function random(min, max) {
            return Math.random() * (max - min) + min;
        }
        //封装一个随机颜色
        function color(a) {
            //rgba
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return `rgba(${r},${g},${b},${a})`
        }
    </script>
</body>
<html>